<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <h3>本月学习达人</h3>
        <el-button class="button" type="text">更多</el-button>
      </div>
    </template>
    <div v-for="(i, index) in rank" :key="index" class="text item">
        <el-row>
            <el-col :span="4">
                <el-avatar :src="i['img']" size="medium" />
                {{ i['name' ]}}
            </el-col>
            <el-col :span="16">
              <div><h4>本月学习积分： {{ i['score'] }}</h4></div>                
            </el-col>
            <el-divider />

        </el-row>
        
    </div>
      
  </el-card>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const rank = ref([
  {
    name: '左手',
    img: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    score: 102,
    description: '本月学习狂魔'
  },
  {
    name: '黑哥',
    img: 'https://img2.baidu.com/it/u=4244269751,4000533845&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    score: 92,
    description: '本月学习狂魔'
  },
  {
    name: '老六',
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fc9%2F63%2F77%2Fc963777ebd9c8ebf5583b39565cfa1d7.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655873980&t=c70318a6f254dcb9c773c08cfad30479',
    score: 88,
    description: '本月学习狂魔'
  },
  {
    name: '变相狂魔',
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F09%2F44%2F5d%2F09445d7fe08dc405a67b8bff169f9825.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655873980&t=60e03e6f7ca40af3cdca18db757ad897',
    score: 87,
    description: '本月学习狂魔'
  },
  {
    name: 'corssover',
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F29%2F20200529083215_wuahf.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655873980&t=e63a2a243dbe60101379b96094a64e50',
    score: 80,
    description: '本月学习狂魔'
  },
])
</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>